<template>
  <div>
    <!-- 已审核编辑 -->
    <el-dialog
      v-el-drag-dialog
      :title="'已审核编辑--' + temp.depositCode"
      :visible.sync="visible"
      append-to-body
      width="80%"
      @closed="reset"
    >
      <div class="dialog-main">
        <div class="main-left">
          <el-form ref="dataForm" class="form" :rules="rules" :model="params" label-width="100px" label-position="right">
            <el-row :gutter="16" class="row-box">
              <el-col :span="12">
                <el-form-item label="押金单号">
                  <el-input v-model="temp.depositCode" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="客户姓名">
                  <el-input v-model="temp.csmName" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="身份证号">
                  <el-input v-model="temp.csmCardNo" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系电话:" prop="csmPhone">
                  <el-select v-model="temp.csmPhone" placeholder="请选择">
                    <el-option v-for="(v,index) in phoneItems" :key="index" :label="v.csmPhone" :value="v.csmPhone" />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="详细地址:" prop="csmAddressId">
                  <el-select v-model="temp.csmAddressId" style="width: 100%;" placeholder="请选择">
                    <el-option v-for="(v,index) in addressItems" :key="index" :label="v.csmAddress" :value="v.csmAddressId" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label-width="0">
                  <lb-table
                    ref="lbTable"
                    border
                    highlight-current-row
                    element-loading-text="加载中"
                    :column="tableData.column"
                    :data="tableData.data.rows"
                    :pagination="false"
                    :summary-method="getSummaries"
                    show-summary
                    align="center"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label-width="100px" label="备  注">
                  <el-input v-model="temp.remark" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="开始时间">
                  <el-input v-model="beginDt" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="审核时间" prop="atTime">
                  <el-date-picker
                    v-model="params.atTime"
                    type="datetime"
                    disabled
                    format="yyyy-MM-dd HH:mm:ss"
                    :clearable="false"
                    placeholder="选择日期"
                    style="width: 100%;"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="手续费">
                  <el-input v-model="fee1" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="经办时间">
                  <el-date-picker
                    v-model="temp.transactDt"
                    type="datetime"
                    format="yyyy-MM-dd HH:mm:ss"
                    :clearable="false"
                    placeholder="选择日期"
                    style="width: 100%;"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="经办人">
                  <el-input v-model="temp.transactor" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="押瓶机构">
                  <el-input v-model="temp.ckOrgName" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="收款人">
                  <el-input v-model="temp.depReceiver" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="收款方式">
                  <el-input v-model="calcType" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="收据单号">
                  <el-input v-model="temp.billCode" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="支付方式">
                  <el-input v-model="paymentMethod" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="支付状态">
                  <el-input v-model="payStatus" disabled />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div style="color: red;">
            特别提示:【审核时间】即入账登记确认时间;如若对应机构启用了库存,此时的【审核时间】将直接影响库存变化
          </div>
        </div>
        <div class="main-right">
          <el-carousel height="300px" style="margin-top: 70px;">
            <el-carousel-item v-for="item in imgList" :key="item">
              <el-image class="right-img" :src="item" :preview-src-list="imgList" />
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reset">关闭</el-button>
        <el-button type="primary" @click="save()">保存</el-button>
        <el-button v-if="temp.isSign === 1" type="primary" @click="showEleContact">查看电子合同</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { customerInfo, depositAuditedSave, queryCashPledgeDetail, showEleContact } from '@/api'
  import { formatColumnMap, parseTime } from '@/utils'
  import dayjs from 'dayjs'

  export default {
    name: 'depositauditEdit',
    props: {
      calcTypeList: {
        type: Array,
        required: true
      },
      paymentMethodList: {
        type: Array,
        required: true
      },
      payStatusList: {
        type: Array,
        required: true
      }
    },
    data() {
      return {
        visible: false,
        baseUrl: 'http://image.haoyunqi.com.cn/',
        params: {
          atTime: ''
        },
        phoneItems: [],
        addressItems: [],
        temp: {
          remark: '',
          csmPhone: '',
          csmAddressId: ''
        },
        rules: {},
        tableData: {
          column: [
            // {
            //   prop: 'goodsCount',
            //   label: '序号',
            //   width: 60
            // },
            {
              prop: 'goodsName',
              label: '规格型号'
            },
            {
              prop: 'rental',
              label: '单个租金（元）',
              width: 130,
              render: (h, { row }) => {
                var rental = row.rental || '0.00'
                rental = (rental * 1).toFixed(2)
                return <span>{rental}</span>
              }
            },
            {
              prop: 'deposit',
              label: '单个押金(元)',
              render: (h, { row }) => {
                var deposit = row.deposit || '0.00'
                deposit = (deposit * 1).toFixed(2)
                return <span>{deposit}</span>
              }
            },
            {
              prop: 'goodsCount',
              label: '数量'
            },
            {
              prop: 'totalDeposit',
              label: '总押金(元)',
              render: (h, { row }) => {
                var totalDeposit = row.totalDeposit || '0.00'
                totalDeposit = (totalDeposit * 1).toFixed(2)
                return <span>{totalDeposit}</span>
              }
            },
            {
              prop: 'btNoIDS',
              label: '气瓶号'
            }
          ],
          data: {
            rows: []
          }
        },
        imgList: []
      }
    },
    computed: {
      // 开始时间
      beginDt: function() {
        return this.temp.beginDt ? parseTime(this.temp.beginDt, '{y}-{m}-{d}') : ''
      },
      // 收款方式
      calcType: function() {
        return formatColumnMap(this.calcTypeList, 'value', this.temp.calcType, 'desc')
      },
      // 支付方式
      paymentMethod: function() {
        return formatColumnMap(this.paymentMethodList, 'value', this.temp.paymentMethod, 'desc')
      },
      // 支付状态
      payStatus: function() {
        return formatColumnMap(this.payStatusList, 'value', this.temp.payStatus, 'desc')
      },
      // 手续费
      fee1: function() {
        var fee1 = this.temp.fee1 || '0.00'
        fee1 = (fee1 * 1).toFixed(2)
        return fee1
      }
    },
    created() {},
    methods: {
      async open(temp) {
        const resInfo = await customerInfo({ csmCode: temp.csmCode })
        if (resInfo && resInfo.data) {
          this.phoneItems = resInfo.data.phoneItems
          this.addressItems = resInfo.data.addressItems
        }
        const res = await queryCashPledgeDetail({
          depCode: temp.depositCode,
          depositId: temp.depositId,
          depStatus: temp.depStatus
        })
        this.temp = res.data
        this.imgList = []
        this.params.atTime = temp.auditDt
        // if (parseTime(this.temp.beginDt, '{y}-{m}-{d}') < parseTime(new Date(), '{y}-{m}-{d}')) {
        //   this.params.atTime = ''
        // } else {
        //   this.params.atTime = parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}')
        // }
        parseTime(new Date(), '{y}-{m}-{d} {h}:{i}')
        console.log('this.temp ', this.temp)
        this.tableData.data.rows = res.data.depositDetails
        this.initImg()
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
        })
      },
      initImg() {
        if (this.temp.depositUrl) {
          this.imgList.push(this.baseUrl + this.temp.depositUrl)
        }
        for (let i = 2; i <= 6; i++) {
          if (this.temp['depositUrl' + i]) {
            this.imgList.push(this.baseUrl + this.temp['depositUrl' + i])
          }
        }
        console.log(this.imgList)
      },
      async save() {
        const params = {
          depositCode: this.temp.depositCode,
          csmPhone: this.temp.csmPhone,
          csmAddress: (this.addressItems.find(item => item.csmAddressId === this.temp.csmAddressId)).csmAddress,
          csmAddressId: this.temp.csmAddressId,
          remark: this.temp.remark,
          transactDt: dayjs(this.temp.transactDt).format('YYYY-MM-DD HH:mm:ss')
        }
        const res = await depositAuditedSave(params)
        if (res && res.data) {
          this.$message.success('操作成功')
          this.visible = false
          this.$emit('upDataTable')
        }
      },
      // 电子合同
      async showEleContact() {
        const res = await showEleContact({ depositCode: this.temp.depositCode })
        const url = res.data
        var m = document.createElement('a')
        m.href = url
        m.target = '_blank'
        document.body.appendChild(m)
        m.click()
      },
      // 合计方法
      getSummaries(param) {
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '押金合计'
            return
          }
          if ([1, 3, 4, 5].includes(index)) {
            sums[index] = ''
            return
          }

          const values = data.map((item) => Number(item[column.property]))
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
        })
        return sums
      },
      // 关闭
      reset() {
        this.params.atTime = ''
        this.temp.remark = ''
        this.visible = false
        this.$nextTick(() => {
          this.$refs.dataForm.clearValidate()
        })
        this.temp = {
          remark: '',
          csmPhone: '',
          csmAddressId: ''
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.form {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.dialog-main {
  display: flex;
  justify-content: space-between;
  width: 100%;
  .main-left {
    width: 55%;
  }
  .main-right {
    width: 44%;
    .right-img {
      height: 300px;
    }
  }
}

.innerTips {
  margin-bottom: 10px;
  .innerIcon {
    margin-right: 4px;
  }
}
</style>
